<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--    a-->
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>

    <p>---------------------------------------</p>

    <router-link :to="{path:'/login'}">登录</router-link>
    <router-link :to="{path:'/register'}">注册</router-link>

    <p>---------------------------------------</p>
    <router-link :to="{name:'login'}">登录</router-link>
    <router-link :to="{name:'register'}">注册</router-link>

    <p>---------------------------------------</p>
    <button @click="tologin">登录</button> <button @click="toregister">注册</button>


    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>

<!--    <login></login>-->
<!--    <register></register>-->
</div>

<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>

    const login = {
        template:`
           <div>
                 <h1>欢迎登录</h1>
                 <form action="">
                    <p><input type="text" placeholder="请输入用户名"></p>
                    <p><input type="text" placeholder="请输入密码"></p>
                    <p><input type="submit" value="立即登录"></p>
                 </form>
            </div>
        `
    }
    const register = {
        template:`
           <div>
                 <h1>欢迎注册</h1>
                 <form action="">
                    <p><input type="text" placeholder="请输入用户名"></p>
                    <p><input type="text" placeholder="请输入密码"></p>
                    <p><input type="submit" value="立即注册"></p>
                </form>
            </div>
        `
    }
    //  定义路由列表
    const  routes = [
        // 用户访问 /login 路径是  login组件被匹配
        {
            path:'/',
            redirect:'/login'   //  重定向 路径
        },
        {
            path:'/login',
            name:'login',
            component:login
        },
        {
            path:'/register',
            name:'register',
            component:register
        }

    ]

    // 创建路由对象
    const router = new VueRouter({
        routes
    })

    const vm = new Vue({
        el:'#app',
        data:{},
        methods:{
            tologin(){  // 跳转到登录页
                console.log("login")
                // this.$router.push("/login")
                // this.$router.push({path:'/login'})
                // this.$router  路由管理对象
                this.$router.push({name:'login'})
            },
            toregister(){ // 跳转到注册页
                console.log("register")
                // this.$router.push("/register")
                // this.$router.push({path:'/register'})
                this.$router.push({name:'register'})
            }
        },
        // components:{
        //     login,register
        // }
        router

    })
</script>

</body>
</html>
